<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <a href="/lesson17?name=mingzhen">name</a>
    <a href="/lesson17?age=17">age</a>
      <a href="/lesson17?subject=javascript">subject</a>
        <ul>
        </ul>
        <script type="text/javascript">
        const ul=document.querySelector("ul");
                var list=document.querySelectorAll("a");
                   list.forEach(function (item){
                     item.addEventListener("click",function (Event){
                       //事件本身的默认行为被阻止
                       Event.preventDefault();
                       //获取对应链接的href
                      const href=Event.target.getAttribute("href");
                         const xml=new XMLHttpRequest();
                         xml.open("GET",href);    //这个代替了原来的a标签发送http请求
                         xml.onreadystatechange=function (){
                           if(xml.status==200 && xml.readyState == 4){
                            const li=document.createElement("li");
                            li.innerText=xml.response;
                            ul.appendChild(li);
                           }
                         }
                         xml.send();
                     });
                   });
        </script>
</body>
</html>
